<template>
	<!-- 添加sku表单 begin -->
	<el-form label-width="80">
		<!-- SKU名称 begin -->
		<el-form-item label="SKU名称">
			<el-input
				placeholder="请你输入SKU名字"
				v-model="skuParams.skuName"
			></el-input>
		</el-form-item>
		<!-- SKU名称 end -->

		<!-- sku价格 begin -->
		<el-form-item label="价格(元)">
			<el-input
				placeholder="请你输入价格"
				type="number"
				v-model="skuParams.price"
			></el-input>
		</el-form-item>
		<!-- sku价格 end -->

		<!-- sku重量 begin -->
		<el-form-item label="重量(G)">
			<el-input
				placeholder="请你输入重量"
				type="number"
				v-model="skuParams.weight"
			></el-input>
		</el-form-item>
		<!-- sku重量 end -->

		<!-- sku描述 begin -->
		<el-form-item label="SKU描述">
			<el-input
				type="textarea"
				placeholder="请你输入描述"
				v-model="skuParams.skuDesc"
			></el-input>
		</el-form-item>
		<!-- sku描述 end -->

		<!-- sku平台属性 begin -->
		<el-form-item label="平台属性">
			<el-form
				:inline="true"
				:label-width="100"
			>
				<el-form-item
					style="margin: 5px"
					:label="attr.attrName"
					v-for="attr in allAttr"
					:key="attr.id"
				>
					<el-select
						placeholder="请选择"
						v-model="attr.attrIdAndValueId"
					>
						<el-option
							:value="`${attr.id}:${item.id}`"
							:label="item.valueName"
							v-for="item in attr.attrValueList"
							:key="item.id"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-form-item>
		<!-- sku平台属性 end -->

		<!-- sku销售属性 begin -->
		<el-form-item label="销售属性">
			<el-form :inline="true">
				<el-form-item
					style="margin: 5px"
					:label="sale.saleAttrName"
					v-for="sale in saleArr"
					:key="sale.baseSaleAttrId"
				>
					<el-select
						placeholder="请选择"
						v-model="sale.saleIdAndValueId"
					>
						<el-option
							:value="`${sale.baseSaleAttrId}:${item.id}`"
							:label="item.saleAttrValueName"
							v-for="item in sale.spuSaleAttrValueList"
							:key="item.id"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-form-item>
		<!-- sku销售属性 end -->

		<!-- sku图片列表 begin -->
		<el-form-item label="图片名称">
			<el-table
				border
				:data="imageArr"
				ref="table"
			>
				<!-- 选择框 begin -->
				<el-table-column
					type="selection"
					style="width: 100px"
					align="center"
				></el-table-column>
				<!-- 选择框 end -->

				<!-- 图片 begin -->
				<el-table-column label="图片">
					<template #="{ row, $index }">
						<el-image
							:src="row.imgUrl"
							style="width: 100px"
						></el-image>
					</template>
				</el-table-column>
				<!-- 图片 end -->

				<!-- 图片名称 begin -->
				<el-table-column
					label="名称"
					prop="imgName"
				></el-table-column>
				<!-- 图片名称 end -->

				<!-- 操作 begin -->
				<el-table-column label="操作">
					<template #="{ row, $index }">
						<el-button
							:type="row.flag ? 'warning' : 'primary'"
							@click="changeFlag(row)"
						>
							{{ row.flag ? '默认图片' : '设置默认' }}
						</el-button>
					</template>
				</el-table-column>
				<!-- 操作 end -->
			</el-table>
		</el-form-item>
		<!-- sku图片列表 end -->

		<!-- sku保存 取消按钮 begin -->
		<el-form-item>
			<el-button
				@click="save"
				type="primary"
				>保存</el-button
			>
			<el-button @click="cancel">取消</el-button>
		</el-form-item>

		<!-- sku保存 取消按钮 end -->
	</el-form>
	<!-- 添加sku表单 end -->
</template>

<script setup lang="ts">
	import { ElMessage } from 'element-plus';
	import { nextTick, ref } from 'vue';
	//引入三个请求
	//需要一、二、三级分类的ID  和已有sup的id
	//需要根据已有的spu的id  获取照片墙和以后的销售属性
	import {
		reqAttr,
		reqSaleAttrList,
		reqImageList,
		reqAddSku,
	} from '../../../api/product/spu/index';

	let allAttr = ref([]);
	let imageArr = ref([]);
	let saleArr = ref([]);

	//收集table组件实例的VC
	let table = ref();

	//准备收集新增SKU的参数
	let skuParams = ref({
		//父组件已给参数
		category3Id: '', //三级分类的ID
		spuId: '', //spu的ID
		tmId: '', //品牌的ID
		//v-model收集下面四个
		skuName: '', //sku的名字
		price: '', //价格
		weight: '', //重量
		skuDesc: '', //sku描述

		skuDefaultImg: '', //sku商品默认图片地址
		//收集平台属性的数据
		skuAttrValueList: [],
		//销售属性的数据
		skuSaleAttrValueList: [],
	});

	//点击保存的回调
	const save = async () => {
		/**
		 * 整理参数=>平台属性
		 * 发请求
		 * 成功
		 * 失败
		 */
		//整理参数--平台属性--reduce
		let resAttr = allAttr.value.reduce((pre, next) => {
			//判断有没有属性
			if (next.attrIdAndValueId) {
				const [attrId, valueId] = next.attrIdAndValueId.split(':');
				// console.log(attrId, valueId);
				let newAttrObj = { attrId, valueId };
				//追加新的数组
				pre.push(newAttrObj);
			}
			return pre;
		}, []);
		// console.log(resAttr);

		//整理参数--销售属性--reduce
		let resSale = saleArr.value.reduce((pre, next) => {
			//判断有没有属性
			if (next.saleIdAndValueId) {
				const [saleAttrId, saleAttrValueId] =
					next.saleIdAndValueId.split(':');
				// console.log(attrId, valueId);
				let newSaleObj = { saleAttrId, saleAttrValueId };
				//追加新的数组
				pre.push(newSaleObj);
			}
			return pre;
		}, []);
		// console.log(resSale);

		skuParams.value.skuAttrValueList = resAttr;
		skuParams.value.skuSaleAttrValueList = resSale;
		// console.log(skuParams.value.skuAttrValueList);
		// console.log(skuParams.value.skuSaleAttrValueList);

		//发请求提交数据
		try {
			//成功
			await reqAddSku(skuParams.value);
			ElMessage({
				type: 'success',
				message: '添加成功',
			});
			//通知父组件切换场景
			$emit('changeScene', { scenes: 0 });
		} catch (error) {
			// 失败
			ElMessage({
				type: 'warning',
				message: '添加失败',
			});
		}
	};

	//取消按钮回调   需要父子组件通信
	const cancel = () => {
		//告诉父组件切换场景为0
		$emit('changeScene', { scenes: 0 });
	};

	//当前子组件skuForm自身的方法，将来给父组件使用
	const initAddSkudata = async (c1Id: number, c2Id: number, spu: any) => {
		//点击添加清空表单数据
		skuParams.value = {
			category3Id: '', //三级分类的ID
			spuId: '', //spu的ID
			tmId: '', //品牌的ID
			//v-model收集下面四个
			skuName: '', //sku的名字
			price: '', //价格
			weight: '', //重量
			skuDesc: '', //sku描述

			skuDefaultImg: '', //sku商品默认图片地址
			//收集平台属性的数据
			skuAttrValueList: [],
			//销售属性的数据
			skuSaleAttrValueList: [],
		};
		allAttr.value = [];
		imageArr.value = [];
		saleArr.value = [];
		//点击添加清空表单数据 end
		// console.log(c1Id, c2Id, spu);
		// console.log('skuForm的方法，将来给父组件使用');

		//收集新增SKU商品新增数据
		skuParams.value.category3Id = spu.category3Id;
		skuParams.value.spuId = spu.id;
		skuParams.value.tmId = spu.tmId;

		//获取平台属性
		let resAttr = await reqAttr(c1Id, c2Id, spu.category3Id);
		// console.log('获取平台属性:', resAttr);

		//获取已有品牌下的全部销售属性-->数组
		let resSaleAttr = await reqSaleAttrList(spu.id);
		// console.log('以后品牌的销售属性:', resSaleAttr);

		//获取照片墙-->数组
		let resImageList = await reqImageList(spu.id);
		// console.log('获取照片墙:', resImageList);

		//存储数据
		allAttr.value = resAttr;
		imageArr.value = resImageList;
		saleArr.value = resSaleAttr;

		/**
		 * 照片teble第一列默认勾选
		 * 第一个参数：图片对象
		 * 第二个参数：布尔值  真：勾选  假：不勾选
		 * 需要table表格主体部分的el-checked勾选
		 * 数据回来之后执行   用nextTick()
		 * table.value.toggleRowSelection(row, selected);
		 */
		if (imageArr.value.length == 0) return;

		nextTick(() => {
			table.value.toggleRowSelection(imageArr.value[0], true);
		});
		//给照片墙的数据追加设置为默认图片标记
		resImageList.forEach((item) => {
			item.flag = false;
		});
		resImageList[0].flag = true;
		//收集默认图片地址
		skuParams.value.skuDefaultImg = imageArr.value[0].imgUrl;
	};
	//照片teble第一列默认勾选 end

	//点击切换默认图片
	const changeFlag = (row) => {
		//全部图片falg=false
		imageArr.value.forEach((item, index) => {
			item.flag = false;
			table.value.toggleRowSelection(item, false);
		});
		row.flag = true;
		table.value.toggleRowSelection(row, true);
		console.log('选中图片的地址:', row.imgUrl);
		//收集默认图片地址
		skuParams.value.skuDefaultImg = row.imgUrl;
	};
	//点击切换默认图片  end

	//获取$emit方法、
	let $emit = defineEmits(['changeScene']);
	//暴漏组件方法
	defineExpose({ initAddSkudata });
</script>

<style scoped></style>
